<template>
  <div class="Homepage">
    
      <div class="main">
          <ul class="tab">
                <li :class="{itemActive:thisIndex === index}" @click="hadleClick(index)" v-for="(item,index) in tabs" :key="index">{{item.title}}</li>
            </ul>
            <!-- 待我审批的 -->
            <div v-show="thisIndex === 0">
                <el-collapse v-for="(item,index) in approvalList" :key="index" v-model="activeNames">
                    <el-collapse-item :title="item.title" :name="index">
                        <ul class="approvalInfo">
                            <li class="clearflx title">
                                <div>申办单位： {{item.company}}</div>
                                <div>{{item.time}}</div>
                            </li>
                            <li>申办业务： {{item.business}}</li>
                            <li>申办人员（驾驶员）：{{item.name}}</li>
                        </ul>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <!-- 我已审批 -->
            <div v-show="thisIndex === 1">
                <el-collapse v-for="(item,index) in approvalList" :key="index" v-model="activeNames">
                    <el-collapse-item :title="item.title" :name="index">
                        <ul class="approvalInfo">
                            <li class="clearflx title">
                                <div>申办单位： {{item.company}}</div>
                                <div>{{item.time}}</div>
                            </li>
                            <li>申办业务： {{item.business}}</li>
                            <li>申办人员（驾驶员）：{{item.name}}</li>
                        </ul>
                    </el-collapse-item>
                </el-collapse>
            </div>
      </div>
   



    <home-footer ref="mychild"></home-footer>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Swiper from "swiper";
import HomeFooter from "../Footer";
export default { 
  name: "HelloWorld",
  data() {
    return {
      selected: "",
      //常用应用
      PersonnelFilesData: [
        {
          id: "1",
          to: "www.baidu.com",
          name: "车辆档案"
        },
        {
          id: "2",
          to: "www.baidu.com",
          name: "驾驶员档案"
        },
        {
          id: "3",
          to: "www.baidu.com",
          name: "人员违规登记"
        },
        {
          id: "4",
          to: "www.baidu.com",
          name: "设备违规登记"
        },
        {
          id: "5",
          to: "www.baidu.com",
          name: "无动力设备档案"
        },
        {
          id: "6",
          to: "www.baidu.com",
          name: "外来物损伤"
        },
        {
          id: "7",
          to: "www.baidu.com",
          name: "知识抽查"
        },
        {
          id: "8",
          to: "www.baidu.com",
          name: "统计分析"
        }
      ],
      dataCount: this.$store.state.userInfo1, //用data接收,
      tabs: [
        {title: '待我审批的'},
        {title: '我已审批的'}
      ],
      thisIndex: 0,
      activeNames: ['0'],
      approvalList: [
          {
              title: '内场驾驶证-换证',
              time: '2018.06.04',
              name: '李四',
              company: '东方航空',
              business: '内场驾驶证换证'
          },
          {
              title: '内场驾驶证-换证',
              time: '2018.06.04',
              name: '李四',
              company: '东方航空',
              business: '内场驾驶证换证'
          },
          {
              title: '内场驾驶证-换证',
              time: '2018.06.04',
              name: '李四',
              company: '东方航空',
              business: '内场驾驶证换证'
          },
      ]
    };
  },
  components: {
    HomeFooter
  },
  created() {},
  computed: {
    ...mapState(["userInfo1"])
  },
  mounted() {
    console.log(this.userInfo1);
    this.$refs.mychild.FooterUlliData("1");
  },
  watch: {
    
  },
  methods: {
    hadleClick (index) {
        this.thisIndex = index;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
.main {
  padding: 10px 20 / 100rem 50px 20 / 100rem;
  text-align: left;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix:after {
  display: block;
  width: 0;
  height: 0;
  line-height: 0;
  content: '';
  clear: both;
  visibility: hidden;
}
.main {
    text-align: left;
}
.tab {
    display: flex;
    flex-direction: row;
    li {
        width: 50%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #00be9f;
        &:nth-child(1) {
            border-radius: 2px 0 0 2px;
        }
        &:nth-child(2) {
            border-radius: 0 2px 2px 0;
        }
    }
}
.itemActive {
    color: #fff;
    background: #00be9f;
}
.approvalInfo {
    padding: 0 10px;
    .title {
        div {
            float: left;
            width: 70%;
            &:nth-child(2) {
                width: 30%;
            }
        }
    }
}
</style>
